<nz-spin [nzSize]="'small'" [nzSpinning]="isSpinning" *ngIf="signInList != null; else notSignIn">
    <div nz-row nzGutter="16">
        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md" *ngFor="let signIn of signInList">
            <div nz-row nzType="flex" nzAlign="middle" class="rounded-md">
                <nz-card nzHoverable>
                    <ng-template #body>
                        <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'" class="rounded-md">
                            <div nz-col nzSpan="6">
                                <img class="img-fluid align-middle" src="./assets/img/{{signIn.userIcon}}" alt="{{signIn.userId}}" />
                            </div>
                            <div nz-col nzSpan="18">
                                <div class="custom-card">
                                    <h3>{{signIn.userName}}</h3>
                                    <p>{{signIn.signTime}} {{signIn.sourceFrom=="P" ? "acmenms.com" : signIn.sourceFrom=="A"
                                        ? "Android" : "iPhone"}}</p>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </nz-card>
            </div>
        </div>
    </div>
    <nz-pagination [(nzPageIndex)]="pageNum" [nzTotal]="pageTotal" (click)="updatePageNum()" style="padding-bottom: 10px;"></nz-pagination>
</nz-spin>

<!-- 没人签到 -->
<ng-template #notSignIn>
    <nz-spin [nzSize]="'small'" [nzSpinning]="isSpinning">
        <div nz-row nzGutter="16">
            <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
                今天还没有人签到哦
            </div>
        </div>
    </nz-spin>
</ng-template>
